<template>
	<view>
		<uni-card title="设备信息" :isFull="true" sub-title="设备报警信息">
			<!-- 第一行：设备名称，设备编号，是否处理 -->
			<view class="device-info">
				<text class="device-name">设备名称: {{ data.name }}</text>
				<text class="device-id">设备编号: {{ data.id }}</text>
				<text class="status" :class="{ processed: data.status === '已处理', unprocessed: data.status === '未处理' }">
					状态: {{ data.status }}
				</text>
			</view>

			<!-- 分割线 -->
			<view class="divider"></view>

			<!-- 第二行：所在场区，所在栋舍，预警原因，报警时间 -->
			<view class="details">
				<view class="row">
					<text class="detail">所在场区: {{ data.location }}</text>
					<text class="detail">所在栋舍: {{ data.home }}</text>
				</view>
				<text class="detail">预警原因: {{ data.reason }}</text>
				<text class="detail">报警时间: {{ data.time }}</text>
			</view>
		</uni-card>
	</view>
</template>

<script>
export default {
	props: {
		data: {
			type: Object,
			required: true,
		}
	}
}
</script>

<style lang="scss">
	.device-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx;
	}

	.device-name,
	.device-id,
	.status {
		font-size: 26rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.status {
		color: #ff0000;
	}
	/* 新增根据状态的样式 */
	.processed {
		color: green;
	}
	.unprocessed {
		color: red;
	}

	.divider {
		border-bottom: 1rpx solid #e0e0e0;
		margin: 20rpx 0;
	}

	.details {
		padding: 0 20rpx;
		width: 100%;
		height: 200rpx;
	}

	.row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.detail {
		display: flex;
		font-size: 28rpx;
		color: #666;
		width: 45%;
		/* 每项占一行的宽度的45%，使其可以并排显示 */
	}
</style>
